<template>
  <div class="no-permission-container">
    <div class="error-content">
      <div class="error-image">
        <svg t="1744464114983" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
             p-id="9045" width="200" height="200">
          <path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#FFC439" p-id="9046"></path>
          <path
              d="M518.981818 279.272727l190.394182 70.749091c7.237818 2.280727 12.125091 9.122909 12.078545 16.826182v130.816c0 155.624727-166.4 224-207.173818 245.224727a16.616727 16.616727 0 0 1-15.173818 0C458.263273 721.687273 302.545455 654.033455 302.545455 498.618182v-131.304727a17.989818 17.989818 0 0 1 11.706181-16.779637L507.368727 279.272727h11.589818z m-6.981818 116.363637c-27.880727 0-51.712 20.48-56.366545 48.500363-4.654545 27.997091 11.240727 55.319273 37.585454 64.651637a18.059636 18.059636 0 0 0-0.256 3.211636v96.977455c0 10.705455 8.517818 19.386182 19.037091 19.386181a19.223273 19.223273 0 0 0 19.037091-19.386181V512a17.361455 17.361455 0 0 0-0.279273-3.188364c26.298182-9.355636 42.193455-36.654545 37.538909-64.651636C563.665455 416.162909 539.880727 395.636364 512 395.636364z"
              fill="#FFFFFF" p-id="9047"></path>
        </svg>
      </div>
      <h1 class="error-title">403</h1>
      <p class="error-message">抱歉，您无权访问此页面</p>
      <p class="error-description">您当前的账号权限不足，请联系管理员获取权限</p>
      <div class="button-group">
        <button @click="goHome" class="action-button primary">返回首页</button>
        <button @click="goBack" class="action-button">返回上一页</button>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {defineComponent} from 'vue';
import {useRouter} from 'vue-router';

export default defineComponent({
  name: 'NoPermission',
  setup() {
    const router = useRouter();

    const goHome = () => {
      router.push('/');
    };

    const goBack = () => {
      router.go(-1);
    };

    return {
      goHome,
      goBack
    };
  }
});
</script>

<style scoped>
.no-permission-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f8f9fa;
  padding: 20px;
}

.error-content {
  text-align: center;
  max-width: 500px;
  width: 100%;
  animation: fadeIn 0.6s ease-out;
}

.error-image {
  margin-bottom: 24px;
}

.error-image svg {
  width: 120px;
  height: 120px;
  animation: pulse 2s ease-in-out infinite;
}

.error-title {
  font-size: 72px;
  font-weight: 700;
  color: #343a40;
  margin-bottom: 16px;
  line-height: 1;
}

.error-message {
  font-size: 24px;
  color: #495057;
  margin-bottom: 8px;
  font-weight: 500;
}

.error-description {
  font-size: 16px;
  color: #6c757d;
  margin-bottom: 32px;
}

.button-group {
  display: flex;
  gap: 16px;
  justify-content: center;
}

.action-button {
  padding: 12px 24px;
  font-size: 16px;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid #dee2e6;
  background-color: white;
  color: #495057;
}

.action-button.primary {
  background-color: #4e73df;
  color: white;
  border: none;
  box-shadow: 0 4px 6px rgba(78, 115, 223, 0.2);
}

.action-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.action-button.primary:hover {
  background-color: #3a5bc7;
  box-shadow: 0 6px 8px rgba(78, 115, 223, 0.3);
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}
</style>
